<template>
  <div>
    <el-form ref="refRegister" :model="createRegisterInput" label-width="120px">
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="修改绑定电话">
            <el-input v-model="createRegisterInput.phoneNumber" disabled type="text" size="mini" />
          </el-form-item>
        </el-col>
        <el-col :span="7" class="gl_mt_5">
          <el-button size="mini" @click="handleEdit('phoneNumber', '修改绑定电话')">更换号码</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="修改密码">
            <el-input v-model="createRegisterInput.password" disabled type="password" size="mini" />
          </el-form-item>
        </el-col>
        <el-col :span="7" class="gl_mt_5">
          <el-button size="mini" @click="handleEdit('password', '修改密码')">修改密码</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="修改绑定微信">
            <el-input v-model="createRegisterInput.weChat" disabled type="text" size="mini" />
          </el-form-item>
        </el-col>
        <el-col :span="7" class="gl_mt_5">
          <el-button size="mini" @click="handleEdit('weChat', '修改绑定微信')">更换号码</el-button>
        </el-col>
      </el-row>
    </el-form>
    <!-- 修改 -->
    <el-dialog :title="editTypeName" width="440px" class="gl_dialog_TitleLine" :close-on-click-modal="false" :visible.sync="dialogEdit">
      <!-- 更换号码 -->
      <template v-if="editType === 'phoneNumber'">
        <el-form ref="refModifyPhone" label-width="100px" :model="formModifyPhoneVO" :rules="accountSetting_Rules">
          <el-form-item label="手机号码" prop="phoneNumber" size="mini">
            <el-input v-model="formModifyPhoneVO.phoneNumber" clearable style="width: 90%" placeholder="请输入新手机号码" />
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input v-model.trim="formModifyPhoneVO.code" class="verifycode_input" type="text" :placeholder="$t('rules.verifyCode')" size="mini" style="width: 90%">
              <el-button v-if="!isSendMsg" slot="append" @click="sendPhoneNum">
                <span>{{ $t('register.sendMSG') }}</span>
              </el-button>
              <el-button v-else slot="append" class="noClick">
                <span>{{ reSendTime }}(s)</span>
              </el-button>
            </el-input>
          </el-form-item>
        </el-form>
      </template>
      <!-- 修改密码 -->
      <template v-if="editType === 'password'">
        <el-form ref="refModifyPassword" label-width="100px" :model="formModifyPasswordVO" :rules="formModifyPasswordVO_Rules">
          <el-form-item label="原密码" prop="oldPassword" size="mini">
            <el-input v-model="formModifyPasswordVO.oldPassword" clearable style="width: 90%" placeholder="请输入原密码" />
          </el-form-item>
          <el-form-item label="新密码" prop="password" size="mini">
            <el-input v-model="formModifyPasswordVO.password" clearable style="width: 90%" placeholder="请输入新密码" />
          </el-form-item>
          <el-form-item label="确认密码" prop="rePassword" size="mini">
            <el-input v-model="formModifyPasswordVO.rePassword" clearable style="width: 90%" placeholder="请输入确认密码" />
          </el-form-item>
        </el-form>
      </template>
      <!-- 修改绑定微信 -->
      <template v-if="editType === 'weChat'">
        <el-form ref="refModifyWeChat" label-width="100px" :model="formModifyWeChatVO" :rules="formModifyWeChatVO_Rules">
          <el-form-item label="绑定微信号" prop="number" size="mini">
            <el-input v-model="formModifyWeChatVO.number" clearable style="width: 90%" placeholder="请输入绑定微的信号" />
          </el-form-item>
          </el-form-item>
        </el-form>
      </template>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="dialogEdit = false">{{ $t('button.cancel') }}</el-button>
        <el-button size="mini" type="primary" :loading="submitLoading" @click="handleSubmitEdit()">{{ $t('button.save') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { api_POST_UsersRegisterSmsCode } from '@/extend/api/swaggerApi/identity';
import {
  AccountSetting_Rules,
  ModifyPasswordVO_Rules,
  ModifyWeChatVO_Rules
} from '@/lib/validate/myCenter';
export default {
  data() {
    return {
      createRegisterInput: {},
      dialogEdit: false,
      editType: '',
      editTypeName: '',
      accountSetting_Rules: new AccountSetting_Rules(),
      formModifyPhoneVO: {},
      formModifyPasswordVO: {},
      formModifyPasswordVO_Rules: new ModifyPasswordVO_Rules(),
      formModifyWeChatVO: {},
      formModifyWeChatVO_Rules: new ModifyWeChatVO_Rules(),
      isSendMsg: false, // 是否已经发送验证码
      reSendTime: 0, // 验证码倒计时
      submitLoading: false
    };
  },
  methods: {
    handleEdit(type, name) {
      this.editType = type;
      this.editTypeName = name;
      this.dialogEdit = true;
    },
    // 发送手机验证码
    sendPhoneNum() {
      // 校验phoneNumber的值是否有效
      this.$refs['refModifyPhone'].validateField('phoneNumber', phoneError => {
        if (!phoneError) {
          // phoneNumber手机号码本地校验已通过
          api_POST_UsersRegisterSmsCode({
            phoneNumber: this.registerDto.phoneNumber,
            isNew: true
          }).then(res => {
            if (res.result === 'Success') {
              this.$message({ type: 'success', message: '手机验证码已发送' });
            } else if (res.result === 'AlreadyExists') {
              this.$message({ type: 'warning', message: '用户已经存在' });
            } else if (res.result === 'InvalidVerificationCode') {
              this.$message({ type: 'warning', message: '无效的验证码' });
            }
          });
          // 同时执行倒计时
          this.countDownTime(60);
        } else {
          return false;
        }
      });
    },
    // 短信倒计时
    countDownTime(num) {
      let timer = null;
      clearInterval(timer);
      this.isSendMsg = true;
      this.reSendTime = num;
      timer = setInterval(() => {
        this.isSendMsg = true;
        this.reSendTime -= 1;
        if (this.reSendTime <= 0) {
          clearInterval(timer);
          this.isSendMsg = false;
        }
      }, 1000);
    },
    // 提交修改
    handleSubmitEdit() {
      if (this.editType === 'phoneNumber') {
        this.$refs['refModifyPhone'].validate(valid => {
          if (valid) {
            // todo
          } else {
            return false;
          }
        });
      }
      if (this.editType === 'password') {
        this.$refs['refModifyPassword'].validate(valid => {
          if (valid) {
            // todo
          } else {
            return false;
          }
        });
      }
      if (this.editType === 'weChat') {
        // todo
        this.$refs['refModifyWeChat'].validate(valid => {
          if (valid) {
            // todo
          } else {
            return false;
          }
        });
      }
    }
  }
};
</script>
